<!DOCTYPE html>
<html>
<head>
<style left="100px", top="200px"></style>

</head>
<body bgcolor="black">
<div id="cc" style="position:absolute; left:500px; top:80px;">
<img   src="C:\git\universe-one\BS\Images/chick1.jpg" />
</div>



<script>
var debugFlag = 1;
function debug(x) {
	if (debugFlag)
		alert(x);
}
/*
	1    2    3
	  \  |  /
	8 -  +  - 4
	  /  |  \ 
	7    6    5
*/
var keyPressed = 0; 
var subKeyPressed = 0;
var mainDirection = 0;  // 2 4 6 8
var realDirection = 0;	// 1 2 3 4 5 6 7 8
var moveTimer = 0;
function keyDown() {
	var key = event.keyCode;
	if ( key == 37 || key == 100 ) { 
		if ( !mainDirection ) {
			mainDirection = 8;
			realDirection = 8;
		}
		else {
			if ( mainDirection == 2) {
				realDirection = 1;
			} else if ( mainDirection == 6) {
				realDirection = 7;
			} else return ;
		}
	} 
	// right -- 4
    else if ( key == 39 || key == 102  ) {
		if ( !mainDirection) {
			realDirection = 4;
			mainDirection = 4;
		}			
		else {
			if ( mainDirection == 2)
				realDirection = 3;
			else if (mainDirection == 6 )
				realDirection = 5;
			else return ;
		}
	}
	// down -- 6
    else if ( key == 40 || key == 98 ) {
		if ( !mainDirection) {
			mainDirection = 6;
			realDirection = 6;
		}
		else {
			if ( mainDirection == 8)
				realDirection = 7;
			else if (mainDirection == 4)
				realDirection = 5;
			else return ;
		}
	}
	// up -- 2
    else if ( key == 38 || key == 104  ) {
		if ( !mainDirection) {
			mainDirection = 2;
			realDirection = 2;
		}			
		else {
			if (mainDirection == 8)
				realDirection = 1;
			else if (mainDirection == 4)
				realDirection = 3;
			else return ;
		}
	}
	else return;
	
	if ( !keyPressed ) {
	
		if (!moveTimer)
			
			moveTimer = window.setInterval(moveTimerFunc,30);
		keyPressed = 1;
	} else if (!subKeyPressed ) {
		subKeyPressed = 1;
	}
}
function keyUp() {
	var key = event.keyCode;
	if ( subKeyPressed ) {
		// left 
		if ( key == 37 || key == 100 ) {
			if ( realDirection == 1) {
				realDirection = 2;
				mainDirection = 2;
			} else if (realDirection == 7) {
				realDirection = 6;
				mainDirection = 6;
			} else return ;
		}
		// right 
		else if ( key == 39 || key == 102 ) {
			if ( realDirection == 3 ) {
				realDirection = 2;
				mainDirection = 2;
			}
			else if ( realDirection == 5 ) {
				realDirection = 6;
				mainDirection = 6;
			}
			else return ;
		}
		// up
		else if ( key == 38 || key == 104 ) {
			if ( realDirection == 1 ) {
				realDirection = 8;
				mainDirection = 8;
			}
			else if ( realDirection == 3 ) {
				realDirection = 4;
				mainDirection = 4;
			}
			else return ;
		}
		// down
		else if ( key == 40 || key == 98 ) {
			if ( realDirection == 7 ) {
				realDirection = 8;
				mainDirection = 8;
			}
			else if ( realDirection == 5 ) {
				realDirection = 4;
				mainDirection = 4;
			}
			else return ;
		} else {
			return ;
		}
	} else if ( keyPressed ) {
		realDirection = 0;
		mainDirection = 0;
	} else {
		return ;
	}
	
	if ( subKeyPressed ) {
		subKeyPressed = 0;
	} else if (  keyPressed) {
		keyPressed = 0;
		if (moveTimer) {
			window.clearInterval(moveTimer);
			moveTimer = 0;
		}
	}
}
function moveTimerFunc() {
	var elem = document.getElementById("cc");
	var left = parseInt(elem.offsetLeft);
	var top = parseInt(elem.offsetTop); 
	var speed = 1 << 4;
		
	if (realDirection == 1) {
		left -= speed >> 1;
		top -= speed >> 1;
	} else if (realDirection == 2) {
		top -= speed;
	} else if (realDirection == 3) {
		left += speed >> 1;
		top -= speed >> 1;
	} else if (realDirection == 4) {
		left += speed;
	} else if (realDirection == 5) {
		left += speed >> 1;
		top += speed >> 1;
	} else if (realDirection == 6) {
		top += speed;
	} else if (realDirection == 7) {
		top += speed >> 1;
		left -= speed >> 1;
	} else if (realDirection == 8) {
		left -= speed;
	} else {
		return ;
	}
	
	elem.style.left = left + "px";
	elem.style.top = top + "px";
}
document.onkeydown = keyDown; 
document.onkeyup = keyUp; 

</script>
</body>
</html>